<!-- 
   Copyright (c) 2011 Google Inc.
  
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
  
       http://www.apache.org/licenses/LICENSE-2.0
  
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->

<br />
<p style='margin-bottom: 5px'>
  <a class='tabbutton_on' href='javascript:void(0)' id="tabbutton_code"
  onclick="window.orkutdevbox.goToTab('code')">Code</a>
  &nbsp;&nbsp;
  <a class='tabbutton_off' href='javascript:void(0)' id="tabbutton_interface"
  onclick="window.orkutdevbox.goToTab('interface')">Interface</a>
  &nbsp;&nbsp;
  <a class='tabbutton_off' href='javascript:void(0)' id="tabbutton_console"
  onclick="window.orkutdevbox.goToTab('console')">Console</a>
  &nbsp;&nbsp;
  <a class='tabbutton_off' href='javascript:void(0)' id="tabbutton_samples"
  onclick="window.orkutdevbox.goToTab('samples')">Samples</a>
</p>

<div class='tab' id='codetab'>
   <div style="position: absolute; width: 170px">
      <div align='center'>
         <img src="http://orkutdevbox.googlecode.com/files/orkutdevboxlogo.png" />
      </div>
      <p><small>
      Version: <span id='appversion'></span><br />
      <em>Copyright &copy; 2011 Google Inc.</em></small></p>
      <p>Enter your OpenSocial code (JS or HTML) in the box and
      click 'Execute' to run it (only
      <a href='javascript:void(0)' onclick='window.orkutdevbox.onCodeHelp()'>
      certain kinds of code</a> are supported).</p>
      <hr />
      Quick snippets:<br />

      <div id='snippetsbox'></div>
      <div id='previewbox'><em>Snippet preview:</em><br />
         <pre id='previewbox_text'></pre>
      </div>
   </div>
   <div style="margin-left: 200px">
      <textarea id='codebox'>debug.say("Hello world!");</textarea><br /><br />
      <div align='center'>
         <button id='executebutton' 
                 onclick='window.orkutdevbox.runCode()'>Execute Code!</button>
      </div>
   </div>
</div>

<div class='tab' id='interfacetab'>
<em>When you run your code as HTML+JS, your
gadget's interface will appear here</em>
</div>

<div class='tab' id='consoletab'>
   <div style="position: absolute; width: 220px">
      <h1>Debug Console</h1>

      <p>This console shows the debug messages printed by your code.
      To print a debug message, simply call <tt>debug.say(msg)</tt> where
      <tt>msg</tt> is the string you want to print. Be aware, however,
      that this is not part of the OpenSocial standard or the Orkut API:
      it's just a convenience provided by OrkutDevBox.</p>
   </div>
   <div style="margin-left: 250px">
      <br /><br />
      <textarea id='consolebox'></textarea>
   </div>
</div>

<div class='tab' id='samplestab'>
   <h1>Samples</h1>
   <p>Here are some samples that illustrate commonly used features.
   Click on a sample below to load it into the code tab.</p>
   <p><b>Warning:</b> any code already on the code tab will be replaced
   by the sample code!</p>
   <hr />
   <div id='samplelist'>
   </div>
</div>

<div id='codehelp'>
<div align='right'>
   <a href='javascript:void(0)' onclick='window.orkutdevbox.onHideCodeHelp()'>Close</a>
</div>
<b>What kind of code is OrkutDevBox compatible with?</b><br />
OrkutDevBox is meant for debug and experimenting purposes, so it features
a very crude parser that works only for simple HTML and Javascript (you
can't run a gadget's XML specification directly, but you can run its
content portion). If you input plain Javascript code, it will run directly and
you can see the output in the 'Console' tab.
If your input is HTML with &lt;script&gt; tags, OrkutDevBox will place your
HTML elements in the 'Interface' tab and run your Javascript (Note: you can
only have one &lt;script&gt; tag in your HTML).
</div>
